<template>
  <div class="contentWrapper">
    <dir @click="showshanchu"
      style="position: absolute;top: 0;right: 0.625rem;z-index: 1;font-size: 0.9375rem;color: lawngreen;" v-text="'删除'">
    </dir>
    <van-list :finished="Boolean(goodscarts.length)" finished-text="没有更多了">
      <div v-for="(item, index) in goodscarts" :key="index">
        <van-checkbox @click="xuanze(index, item.checked)" style="position: absolute;z-index: 1;margin-top: 2.5rem;"
          v-model="item.checked"></van-checkbox>
        <van-card :price="item.price" :title="item.name" :thumb="item.img">
          <template #footer>
            <van-stepper @minus="ddaminus(index, item.num)" @plus="addplus(index, item.num)" v-model="item.num"
              theme="round" button-size="22" disable-input />
          </template>
        </van-card>
      </div>
    </van-list>
    <van-submit-bar  @submit="onSubmit" :price="qianqian*100" button-text="去结算">
      <van-checkbox @click="onquanx" v-model="quanxuan">全选</van-checkbox>
    </van-submit-bar>
    <van-popup :overlay='false' v-model="erciqueren">
      <div style="background-color: #9acfb3;width: 50vw;height: 30vw;border-radius: 10px;">
        <div style="text-align: center;color: #1989fa;">确认要删除吗？</div>
        <div style="position: absolute;bottom: 0;">
          <van-button @click="erciqueren = !erciqueren" type="danger">取消</van-button>
        </div>
        <div style="position: absolute;bottom: 0;right: 0;">
          <van-button @click="zhenshanchu" type="primary">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import router from '@/router'
import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: 'secTion',
    data() {
      return {
        userToken: localStorage.getItem('userToken') || '',
        erciqueren: false
      }
    },
    methods: {
      ...mapMutations(['SET_GOODSCART', 'SET_GOODS_ORDER']),
      getCartinfo() {
        this.$api.homeData.goods_getcart(this.userToken).then(res => {
          this.SET_GOODSCART(res.data)
        })
      },
      xuanze(d, b) {
        if (b) {
          this.goodscarts[d].checked = true
        } else {
          this.goodscarts[d].checked = false
        }
      },
      addplus(d, b) {
        this.goodscarts[d].num = b + 1
      },
      ddaminus(d, b) {
        this.goodscarts[d].num = b - 1
      },
      onquanx() {
        if (this.quanxuan) {
          this.goodscarts.map(x => {
            x.checked = false
            return x
          })
        } else {
          this.goodscarts.map(x => {
            x.checked = true
            return x
          })
        }
      },
      showshanchu() {
        if (this.goodscarts.filter(x => x.checked).length) {
          this.erciqueren = !this.erciqueren
        }
      },
      async zhenshanchu() {
        const res = await this.$api.homeData.goods_Cart(this.goodscarts.filter(x => x.checked))
        if (res.status === 202) {
          this.$toast.success('删除成功')
          this.getCartinfo()
        }
        this.erciqueren = !this.erciqueren
      },
      onSubmit() {
        this.SET_GOODS_ORDER(this.goodscarts)
        router.push('/Order')
      }
    },
    computed: {
      ...mapState(['goodscarts']),
      quanxuan() {
        const w = this.goodscarts.filter(x => x.checked)
        if (this.goodscarts.length === w.length) {
          return 1
        } else {
          return 0
        }
      },
      qianqian() {
        let q = 0
        const w = this.goodscarts.filter(x => x.checked)
        for (const i in w) {
          q += w[i].price
        }
        return q
      }
    },
    created() {
      this.getCartinfo()
    }
  }
</script>

<style>
</style>
